<script>
import doing from "../../components/practice/doing.vue"
import request from "../../../utils/request"
import store from "../../../store"
import { userActionType } from "@/store/modules/user"
import { showModal, showToast, valIsEmpty } from "@/utils"
import studyRoomFloat from "@/components/studyRoomFloat/index.vue"

export default {
  name: "practice",
  components: { doing, studyRoomFloat },
  data() {
    return {
      type: "",
      pagination: {
        current: 1,
        size: 10,
      },
      wordList: [],
      currentIndex: 0,
      planInfo: {},
    }
  },
  onLoad(query) {
    this.planInfo = JSON.parse(decodeURIComponent(query.planInfo))
    this.type = query.type
    this.pagination.current = query.current || 1
    this.getWordList(query.wordId)
  },
	computed: {
		userSelectExamId: () => store.getters[userActionType.getters.userSelectExamId],
	},
  methods: {
    async nextWord(userAnswer) {
      //如果是错词则需要把答题记录提交到后台
      if (this.type === "wrong") {
        await this.submitRecord(userAnswer)
      }
      //当前列表索引加一
      if (this.currentIndex < this.wordList.length - 1) {
        this.currentIndex++
        //翻页
      } else {
        this.pagination.current++
        await this.getWordList()
      }
    },
    async preWord(userAnswer) {
      //当前列表索引减一
      if (this.currentIndex > 0) {
        this.currentIndex--
        //当前已经是第一页了
      } else if (this.pagination.current <= 1) {
        showToast.default("当前已经是第一个了")
        //翻页
      } else {
        this.pagination.current--
        await this.getWordList()
        this.currentIndex = this.wordList.length - 1
      }
    },
    //将答题记录提交到后台
    async submitRecord(userAnswer = false) {
      const currentWordItem = this.wordList[this.currentIndex]
      await request({
        url: "userWordsRecord/updateWrongWords",
        data: {
          wordId: currentWordItem.wordId,
          userAnswer: userAnswer,
        },
        errorHandle: true,
      })
    },
    getWordList(wordId) {
      return new Promise(async (resolve, reject) => {
				if (!this.userSelectExamId) {
					await store.dispatch(userActionType.action.examInfo)
				}
        let url
        let queryParams = { ...this.pagination }
        switch (this.type) {
          case "wrong":
            url = "userWordsRecord/getWrongWordsPage"
            queryParams.examId = this.userSelectExamId
            break
          case "favorite":
            url = "userFavoriteWords/getFavoriteWordsPage"
            queryParams.examId = this.userSelectExamId
            break
          case "wordList":
            url = "userWordsRecord/getWordsPage"
            queryParams.planId = this.planInfo.planId
            break
        }
        const { total, records } = await request({
          url,
          data: queryParams,
          errorHandle: true,
          showLoading: true,
        })
        //单词都刷完了
        if (total <= 0) {
          await showModal({
            title: "提示",
            content: "单词已刷完",
            icon: "none",
            showCancel: false,
          })
          uni.navigateBack()
          return
        }
        //当前页没有数据，则重新回到第一页
        if (this.pagination.current !== 1 && records.length <= 0) {
          this.pagination.current = 1
          this.getWordList()
            .then((res) => {
              resolve(res)
            })
            .catch((err) => {
              reject(err)
            })
          return
        }
        this.wordList = records
        //根据wordId定位到指定的单词
        if (wordId) {
          this.currentIndex = this.wordList.findIndex((item) => item.wordId === wordId)
        } else {
          this.currentIndex = 0
        }
        resolve()
      })
    },
  },
}
</script>

<template>
  <view class="page">
    <doing
      height="100vh"
      v-if="wordList.length > 0"
      :thesaurus-id="planInfo.thesaurusId"
      :practice-mode="planInfo.practiceMode"
      @nextWord="nextWord"
      @prev-word="preWord"
      :word-list="wordList"
      :current-index="currentIndex"
      @submitRecord="submitRecord"
    ></doing>
		
		<studyRoomFloat></studyRoomFloat>
  </view>
</template>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  position: relative;
}
</style>
